<template>
  <div>
    <div
      class="udlite-text-sm header--header--3sK1h header--flex-middle--2Xqjv"
      data-purpose="header"
    >
      <div class="skip-to-content-button--skip-to-content--1MoIi">
        <button
          type="button"
          class="udlite-btn udlite-btn-large udlite-btn-primary udlite-heading-md skip-to-content-button--skip-to-content-btn--3Uakj"
        >
          <span
            aria-hidden="true"
            class="skip-to-content-button--skip-to-content-shadow--eBW6V"
          ></span
          ><span style="margin: 0">跳转至目录</span>
        </button>
      </div>

      <a href="/" class="header--flex-middle--2Xqjv header--logo--bdAod">
        <img
          src="../../assets/static/picture/logo-coral.svg"
          alt="Udemy"
          width="110"
          height="32"
        />
      </a>

      <nav
        class="header--gap-button--3bIww popper--popper--19faV popper--popper-hover--4YJ5J"
      >
        <span class="udlite-text-sm header--dropdown-button-text--2jtIM"
          >类别</span
        >
      </nav>

      <div
        class="udlite-search-form-autocomplete header--search-bar--1_mS0 udlite-form-group"
      >
        <label
          class="udlite-sr-only udlite-form-label udlite-heading-sm"
          for="u339-search-form-autocomplete--3"
          >搜索任何内容</label
        >
        <input
          placeholder="搜索任何内容"
          name="q"
          autoComplete="off"
          value=""
          id="u339-search-form-autocomplete--3"
          class="udlite-text-input udlite-text-input-small udlite-text-sm udlite-search-form-autocomplete-input js-header-search-field"
        />
      </div>
      <div style="flex: 1"></div>

      <van-cell-group v-for="(u, index) in u_list" :key="index">
        <router-link to="/myhome">
          <van-image round width="5rem" height="5rem" :src="'http://127.0.0.1:8000/static/upload/' + u.picture">
          </van-image>
        </router-link>
      </van-cell-group>
      
      &nbsp;&nbsp;

      <div v-if="username != ''">
         <router-link to="/mycenter">{{ username }}</router-link> 
        &nbsp;&nbsp;
        <van-button
          @click="quit_login"
          size="small"
          color="linear-gradient(to right, #ff6034, #ee0a24)"
          >注销</van-button
        >&emsp;
        <van-button
          size="small"
          color="skyblue"
          to="/authorization"
        >权限管理</van-button>
      </div>
      <div v-else>
        <router-link to="/mylogin">登录</router-link
        >&nbsp;&nbsp;|&nbsp;&nbsp;<router-link to="/myregister"
          >注册</router-link
        >
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "projectheader",
  data() {
    return {
      username: "",
      u_list:[],
      token: localStorage.getItem("token"),
    };
  },
  mounted: function () {
    var u_name = localStorage.getItem("u_name");
    if (u_name == null) {
      this.username = "";
    } else {
      this.username = u_name;
    }
  },
  methods: {
    quit_login() {
      localStorage.removeItem("u_name");
      localStorage.removeItem("token");
      this.$router.push("/mylogin");
    },
  },
  created() {
        this.axios
      .get("http://127.0.0.1:8000/user/", { params: { token: this.token } })
      .then((res) => {
        this.u_list = res.data.data;
      });
  },
};
</script>

<style>
</style>